<template>
  <div class="wrap-bg">
    <div class="head-box h-360" :style="{background: `url(${getAssetsImages('innovative-bg')}) no-repeat`, 'background-size': '100% 100%'}">
    </div>
    <div class="content padlr320">
        <div class="head-tit pad-t76">聚合更多优势资源，助力企业创新发展</div>
        <div class="head-tips mar-t17">精准匹配全国创新政策，让创新研发更轻松</div>
        <div class="head-search-box padlr20 mar-t38">
            <div class="search-ipt flex-a">
                <div class="search-l  flex-a">
                    <div class="l-menu pad-l18 flex-a">
                        <el-dropdown>
                            <div class="flex-a search-txt ">
                                <div class="mar-r8 w-28">中国</div>
                                <el-icon>
                                    <caret-bottom size="12" />
                                </el-icon>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>中国</el-dropdown-item>
                                    <el-dropdown-item>Action 2</el-dropdown-item>
                                    <el-dropdown-item>Action 3</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        
                    </div>
                    <div class="search-line marlr20 "></div>
                    <div class="search-icon mar-r10">
                        <el-image 
                            style="width: 20px; height: 20px" 
                            :src="getAssetsImages('search-icon')" 
                        />
                    </div>
                    <el-input
                        v-model="searchKey"
                        style="height: 56px; "
                        placeholder="请输入商标名称、申请号或申请人名称"
                    >
                    </el-input>
                </div>
                <div class="search-btn ">
                    免费查询能否登记
                </div>
            </div>
        </div>
        <div class="innovate-card mar-t80">
            <div 
                class="innovate-li"
                v-for="(item, index) in innovateList"
                :key="index"
            >
                <div v-if="index < innovateList.length -1">
                    <div class="block-tit pad-t60">{{ item.title }}</div>
                    <div class="innovate-li-card mar-t32 flex">
                        <div 
                            class="card-l pad18"
                            :style="{
                                background: `url(${item?.child[0]?.img}) no-repeat`, 
                                'background-size': '100% 100%'
                            }"
                        >
                            <div class="card-l-name mar-t10">{{ item?.child[0].title }}</div>
                            <div class="card-l-tips mar-t20">{{ item?.child[0].describe }}</div>
                        </div>
                        <div class="card-child-list flex flex-wrap">
                            <div 
                                class="card-child-li pad-l20"
                                v-for="(childItem,childIndex) in item?.child?.slice(1)"
                                :key="childIndex"
                                @click="childCurrent = childItem.id"
                            >
                                <div 
                                    class="li-item padlr30 pad-t30 pad-b20 flex-col ju-bt"
                                    :class="{'mar-t20': childIndex > 1}"
                                    :style="{
                                        background: childCurrent === childItem.id ? `url(${getAssetsImages('card-bg2')}) no-repeat` : '' , 
                                        'background-size': '100% 100%'
                                    }"
                                >
                                    <div class="li-item-info">
                                        <div class="info-name">{{ childItem.title }}</div>
                                        <div class="info-tips mar-t10">{{ childItem.describe }}</div>
                                    </div>
                                    <div 
                                        class="li-item-btn flex-a flex-j-end" 
                                        @click="toPath(childItem)"
                                    >
                                        <span class="mar-r5">了解详情</span>
                                        <el-image 
                                            style="width: 12px; height: 12px" 
                                            :src="getAssetsImages('arrows-icon2')" 
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <service-module :serviceInfo="item" @toPath="toPath"></service-module>
                </div>
            </div>
        </div>
    </div>
    <service-process :service_id="service_id" parentType="tos"></service-process>
    <advantage :service_id="service_id" parentType="tos"></advantage>
    <find-out-details></find-out-details>
  </div>
</template>

<script setup>
/**
 * 创新服务
*/
import { ref, reactive } from "vue"
// 服务流程组件
import serviceProcess from "@/components/serviceProcess/index.vue"
// 平台优势组件
import advantage from "@/components/advantage/advantage.vue"
// 了解详情组件
import findOutDetails from "@/components/findOutDetails/index.vue"
// 服务模块组件
import serviceModule from "@/components/serviceModule/index.vue"
import serviceApi from "@/api/modules/trademarkService.js"
const router = useRouter();
const route = useRoute()
const service_id = ref(route.query.id ?? '')
const toPath = item => {
    if(!item) return
    router.push({
        path: 'productDetail',
        query: {
            id: item.id,
            title: item.title,
        }
    });
};
let searchKey = ref("")
// 创新卡片模块
let innovateList = ref([])
// card 选中的下标 id
let childCurrent = ref("")
const routerPaths = [
    {
        key: "创新型中小企业认定",
        path: "innovativeEnterpriseIdentification"
    },
    {
        key: "专精特新企业认定",
        path: "innovationExpertise"
    },
    {
        key: "集成电路布图设计",
        path: "innovationIntegration"
    },
]
// 获取列表
const getList = () => { 
    return serviceApi.getList({
        type: service_id.value,
        is_all: 1
    }).then(res => { 
        innovateList.value = res.data
        console.log(innovateList.value, "--innovateList.value");
    })
}
getList();
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>

.innovate-card {
    .innovate-li {
        .innovate-li-card {
            .card-l {
                width: 280px;
                height: 340px;
                background: linear-gradient(180deg,#2189b5, #a5cddf);
                border: 2px solid #ffffff;
                border-radius: 4px;
                box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
                .card-l-name {
                    font-size: 24px;
                    font-family: PingFang SC, PingFang SC-Semibold;
                    font-weight: Semibold;
                    text-align: left;
                    color: #ffffff;
                }
                .card-l-tips {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: Regular;
                    text-align: left;
                    color: #ffffff;
                }
            }
            .card-child-list {
                width: calc(100% - 280px);
                .card-child-li {
                    width: 50%;
                    .li-item {
                        width: 100%;
                        height: 160px;
                        background: linear-gradient(180deg,#f0f3f7, #ffffff);
                        border: 2px solid #ffffff;
                        border-radius: 4px;
                        box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
                        .li-item-btn {
                            font-size: 14px;
                            font-family: PingFang TC, PingFang TC-Regular;
                            font-weight: Regular;
                            text-align: left;
                            color: #0052d9;
                        }
                        .li-item-info {
                            .info-name {
                                font-size: 16px;
                                font-family: PingFang SC, PingFang SC-Medium;
                                font-weight: Medium;
                                text-align: left;
                                color: #202020;
                            }
                            .info-tips {
                                font-size: 14px;
                                font-family: PingFang SC, PingFang SC-Regular;
                                font-weight: Regular;
                                text-align: left;
                                color: #575966;
                            }
                        }
                    }
                }
            }
        }
    }
}
.block-tit {
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
}
:deep(.search-txt:focus) {
  outline: none;
}
:deep(.el-input__wrapper) {
    box-shadow: none;
    flex-grow: 0;
    background: transparent ;
    width: 100%;
}
.content {
    position: relative;
    .head-tit {
        font-size: 36px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: left;
        color: #202020;
        text-align: center;
    }
    .head-tips {
        font-size: 18px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: center;
        color: #575966;
    }
    .head-search-box {
    .search-ipt {
        background: #ffffff;
        .search-l {
            width: calc(100% - 120px);
            height: 56px;
            border: 1px solid #1752d9;
            border-radius: 4px 0 0 4px;
            .l-menu {
                .search-txt {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Medium;
                    font-weight: Medium;
                    text-align: left;
                    color: #222426;
                }
            }
            .search-line {
                width: 1px;
                height: 29px;
                background-color: #e5e8eb;
            }
        }
        .search-btn {
            width: 160px;
            height: 56px;
            background: #0052d9;
            border-radius: 0px 4px 4px 0px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: Medium;
            text-align: center;
            color: #ffffff;
            line-height: 56px;
        }
    }
}
}
.head-box {
    width: 100%;
    position: absolute;

}
</style>